<template>
  <div class="login w-full h-full">
    <div class="login-content relative">
      <span title="扫码登录" class="qr-switch absolute cursor-pointer" />
      <div class="login-title flex items-center justify-center">
        <span>应急指挥信息系统</span>
      </div>

      <div class="form-content flex">
        <span class="form-logo flex-shrink-0 flex justify-center items-center h-full">
          <img src="./assets/loginLogo_1.png" />
        </span>
        <div class="login-form flex flex-col flex-1">
          <span class="label">账号</span>
          <div class="name common-input-wrapper block w-full">
            <input placeholder="请输入账号" class="common-input w-full h-full" />
          </div>
          <span class="label">密码</span>
          <div class="common-input-wrapper block w-full">
            <input type="password" placeholder="请输入密码" class="common-input w-full h-full" />
          </div>
          <div class="button-row w-full flex justify-between">
            <div class="kt-login-button h-full btn cursor-pointer"></div>
            <div class="kt-login-reset h-full btn cursor-pointer"></div>
          </div>
          <!-- <div class="login-switch">
            <div class="split-line"></div>
            <div class="switch-content">
              <div class="switch-icon text"></div>
              <div class="switch-text">短信登录</div>
            </div>
            <div class="split-line"></div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.login {
  background-image: url('./assets/kt-login-bg.jpg');
}

.login-content {
  width: 733px;
  height: 492px;
  margin: 0 auto;
  background-image: url(./assets/kt-login-form.png);
  user-select: none;
  top: calc(50% - 303px);
  left: 10px;
  padding-top: 75px;

  .qr-switch {
    right: 45px;
    top: 45px;
    width: 76px;
    height: 76px;
    border-bottom-left-radius: 100%;
    background-image: url(./assets/qr-switch-qr.png);
  }
  .login-title {
    width: 680px;
    margin: 0 auto;
    transform: scaleY(0.85);
    padding: 0 50px;
    height: 60px;
    pointer-events: none;
    font-family: FZLTTHC;
    letter-spacing: 13px;
    font-size: 54px;
    // 文字渐变
    @include tool.txtTransform(#70b7f9, #fff);
  }

  .form-content {
    width: 100%;
    height: 300px;
    padding: 10px 90px 0px 70px;
    .form-logo {
      width: 184px;
      height: 184px;
      margin: 0 20px;
    }
  }
}

.login-form {
  // flex: 1;
  .label {
    font-size: 18px;
    margin-bottom: 5px;
    letter-spacing: 13px;
  }
  .common-input-wrapper {
    height: 38px;
    @include tool.bgFull('./assets/kt-login-input.png');
    input {
      color: #82f4ff;
      padding-left: 6px;
      font-size: 18px;
      // background: transparent;
      // outline: none;
      // border: none;
    }
    &.name{
      margin-bottom: 16px
    }
  }
  .button-row {
    margin-top: 30px;
    height: 52px;
    .btn{
      width: 159px;
      cursor: pointer;
    }
    // flex-shrink: 0;
    // width: 100%;
    // display: flex;
    // justify-content: space-between;
    .kt-login-button {
      // background-image: url(./assets/login-button-n.png);
      @include tool.bgFull('./assets/login-button-n.png');
      &:hover{
        @include tool.bgFull('./assets/login-button-h.png');
      }
    }
    .kt-login-reset {
      @include tool.bgFull('./assets/login-reset-n.png');
      // background-image: url(./assets/login-reset-n.png);
      &:hover{
        @include tool.bgFull('./assets/login-reset-h.png');
      }
    }
  }
}
</style>
